<template>
  <a-card>
    <template #extra>
      <a-space>
        <a-button icon="reload" @click="fetchData()" :loading="loading">{{ $t('refresh') }}
        </a-button>
      </a-space>
    </template>

    <a-table size="middle" :columns="columns" :data-source="configList" :row-key="record => record.supplier" :loading="loading" :pagination="false">
      <div slot="supplier" slot-scope="text, record">
        {{ record.supplier }} : {{ record.supplierAbbr }}
      </div>
      <div slot="apiId" slot-scope="text, record">
        {{ record.apiId }} <br /> ApiUser: {{ record.apiUser }}
      </div>
      <div slot="apiUrl" slot-scope="text, record">
        {{ record.apiUrl }} <br /> {{ record.apiUrl1 }}
      </div>
      <div slot="apiPwd" slot-scope="text, record">
        {{ record.apiPwd }} <br /> ApiToken: {{ record.apiToken }}
      </div>
      <template #expandedRowRender="record">
        <p style="margin: 0">
          {{ record.apiAttach}}
          <br />
          {{ record.apiRemark}}
        </p>
      </template>
      <template v-for="(item, index) in columns" :slot="item.slotName">
        <span :key="index">{{ $t(item.slotName) }}</span>
      </template>
    </a-table>
  </a-card>
</template>

<script>
import {getConfigList} from '@/services/supplier'

export default {
  name: "SupplierConfig",
  i18n: require('../i18n'),
  data() {
    return {
      hotelInfo: {},
      columns:[
        {
          dataIndex: 'supplierGroup',
          align: 'left',
          slotName: "group",
          slots: { title: 'group' },
          sorter: (a, b) => a.supplierGroup.localeCompare(b.supplierGroup),
        },
        {
          dataIndex: 'supplier',
          align: 'left',
          slotName: "supplier",
          slots: { title: 'supplier' },
          scopedSlots: { customRender: 'supplier' },
          sorter: (a, b) => a.supplier.localeCompare(b.supplier),
        },
        {
          title: 'ApiId',
          dataIndex: 'apiId',
          align: 'left',
          scopedSlots: { customRender: 'apiId' },
        },
        {
          title: 'ApiPwd',
          dataIndex: 'apiPwd',
          align: 'left',
          scopedSlots: { customRender: 'apiPwd' },
        },
        {
          title: 'ApiUrl',
          dataIndex: 'apiUrl',
          align: 'left',
          scopedSlots: { customRender: 'apiUrl' },
        },
        {
          title: 'Currency',
          dataIndex: 'currencyCode',
          align: 'left',
        },
      ],
      configList: [],
      loading: false,
    }
  },
  methods: {
    fetchData(){
      this.loading = true
      getConfigList().then(res => {
        this.configList = res.data.data
        this.loading = false
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    },
  },
  created() {
    this.fetchData()
  }
}
</script>